<template>
  <div class="main ff-regular">
    <div class="content">
      <div class="wrapper">
        <div class="page">
          <!-- <img src="@/assets/images/public/pay_flow.webp" class="pay-flow" alt=""> -->
          <img v-if="userLanguage.code == 'zh_CN'" class="pay-flow" alt="notice"
            src="@/assets/images/public/pay_flow_zh.png">
          <img v-else class="pay-flow" alt="notice" src="@/assets/images/public/pay_flow_en.png">
          <div class="top-title ff-bold">{{ $t("pay.desk") }}</div>
          <div class="top-text">
            {{ $t("pay.orderSuccessfully") }}
          </div>
          <i18n path="pay.pleaseAt" class="pay-date">
            <span slot="date">{{ info.expireTime }}</span>
          </i18n>
          <!-- 支付手续费下降 -->
          <!-- <div class="pay-tip">
            <div class="tip-title">{{ $t('event.pay_text_tips') }}</div>
            <div class="tip-content">
              {{ $t('event.tips_left_text') }}
              <span>
                <img src="@/assets/images/activity/reduce.png" class="reduce-img" alt="">
                handling charge
              </span>
              {{ $t('event.tips_right_text') }}
            </div>
          </div> -->
          <!-- 支付新方式 -->
          <div class="pay-tip" v-if="showPayType">
            <div class="tip-title">
              <div class="left ff-bold">
                <img src="@/assets/images/public/praise.png" class="praise-icon" alt="">
                {{ $t('combination.area_title_text') }}
              </div>
              <Icon type="md-close" class="close-icon" @click="closeMet" />
            </div>
            <div class="tip-content">
              {{ $t('combination.area_tip_text') }}
              <router-link :to="comJump" target="_blank">
                <span class="jump-text">{{ $t('combination.new_rules_detail') }}</span>
              </router-link>
            </div>
          </div>
          <div class="content">
            <div class="title ff-bold">{{ $t("pay.selectCurrency") }}</div>
            <div class="select-country">
              <Select v-model="currentCurrency" @on-change="selectCurrency" style="width: 240px">
                <Avatar v-if="currentInfo.flagImg" :src="currentInfo.flagImg" slot="prefix" size="small" />
                <Option v-for="item in currencyList" :label="item.currencyCode" :value="item.currencyCode"
                  :key="item.id">
                  <!-- <div class="option-content">
                <img class="logo" :src="item.flagImg" alt="" />
                <span>{{ item.text }}</span>
              </div> -->
                </Option>
              </Select>
              <span class="hint">{{ $t("pay.openPaymentChannels") }}</span>
            </div>

            <div class="pay-list">
              <RadioGroup class="radio-group" v-model="channelIdentification">
                <template>
                  <!-- 优先推荐的支付方式 -->
                  <div class="deficiency-sty" v-if="priorityList.length > 0">
                    <div v-for="(priority, priorityIndex) in priorityList" :key="priorityIndex" class="rect-area">
                      <!-- 余额 -->
                      <div v-if="priority.payCode == 'balance'">
                        <div class="default-tag">
                          {{ $t('combination.default_balance_text') }}
                        </div>
                        <div class="pay-content" @click="onSelect(priority)">
                          <div class="left">
                            <div class="pay-wrap">
                              <Radio :label="priority.payCode">
                                <img class="pay-logo" :src="priority.icon" alt="" />
                              </Radio>
                            </div>
                            <div class="tooltip">
                              {{ currentInfo.code }} {{ balanceAmount }}
                              <Tooltip :content="priority.description" max-width="400" placement="top">
                                <span class="tooltip-content">
                                  <span class="iconfont icon-bangzhu"></span>
                                </span>
                              </Tooltip>
                            </div>
                          </div>
                          <div class="right">
                            <div class="btn" @click="rechargePop = true">
                              {{ $t("pay.recharge") }}
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 金币-组合支付 -->
                      <div v-if="priority.payCode == 'goldcoin'">
                        <div class="sum-up" v-if="isShowFlag">
                          <img src="@/assets/images/public/tag.png" class="tag-img" alt="">
                          <span class="entrance-text" @click="combinationMet()">
                            {{ $t('combination.entrance_text') }}
                            <Icon type="ios-arrow-forward" class="right" />
                          </span>
                        </div>
                        <div class="pay-content" @click="onSelect(priority)">
                          <div class="left">
                            <div class="pay-wrap">
                              <Radio :label="priority.payCode">
                                <img class="pay-logo" :src="priority.icon" alt="" />
                              </Radio>
                            </div>
                            <div class="coin-sty" v-if="priority.payCode == 'goldcoin'">
                              <div class="coin-info">
                                {{ $t('combination.gold_coin') }}: {{ goldCoinCNYAmount }}
                                <Tooltip :content="priority.description" max-width="400" placement="top">
                                  <span class="tooltip-content">
                                    <span class="iconfont icon-bangzhu"></span>
                                  </span>
                                </Tooltip>
                              </div>
                              <div class="conversion-text">{{ $t('combination.about_etc') }} {{ currentCurrency }} {{
                                goldCoinAmount }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 银行汇款 -->
                  <div class="pay-tit" v-if="false">{{ $t('pay.bank_pay_tit') }}
                    <span class="col-red">{{ $t('pay.bank_sub_pay_tit') }}</span>
                    <img src="@/assets/images/public/good.png" class="good-icon" alt="">
                  </div>
                  <div class="pay-item" @click="selectBank()" v-if="false">
                    <div class="other-payment">
                      <div class="pay-content">
                        <div class="line-sty">
                          <div class="left">
                            <div class="pay-wrap">
                              <Radio label="bankCode">
                                <img class="pay-logo icon-sty" src="@/assets/images/pay/bank_icon.png" alt="" />
                              </Radio>
                            </div>
                            <div class="tooltip">{{ $t('pay.pay_tit_bank') }}</div>
                          </div>
                        </div>
                        <div class="right">
                          <span class="remark">{{ $t('pay.bank_rig_desc') }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 提供的支付通道 -->
                  <div class="pay-tit ff-bold">{{ $t('pay.online_pay_tit') }}</div>
                  <div class="pay-item" v-for="item in payList" @click="onSelect(item)" :key="item.id">
                    <!-- 禁用遮罩 -->
                    <div class="mask-area" v-if="quotaStyle(item)"></div>
                    <!-- <div class="tag">{{ item.title }}</div> -->
                    <div class="other-payment">
                      <div class="pay-content">
                        <div class="line-sty">
                          <div class="left">
                            <div class="pay-wrap">
                              <Radio :label="item.payCode"
                                :disabled="item.dailyLimitFlag || (item.forbid && item.forbid == 'disable')">
                                <img class="pay-logo" :src="item.icon" alt="" />
                              </Radio>
                            </div>
                            <div class="tooltip">
                              {{ item.name }}
                              <Tooltip :content="item.description" max-width="400" placement="top">
                                <span class="tooltip-content">
                                  <span class="iconfont icon-bangzhu"></span>
                                </span>
                              </Tooltip>
                            </div>
                            <img class="credit-card" v-if="item.subIcon" :src="item.subIcon" alt="" />
                            <div class="hand-fee">
                              {{ $t("pay.handlingCharge") }}:{{ item.expressCalcVo.channelRate }}%+{{
                                item.expressCalcVo.currencyCode }}
                              {{ item.expressCalcVo.channelFixFee }}
                            </div>
                            <div class="join-area" v-if="item.forbid && item.forbid == 'disable'">
                              <div class="border-sty"></div>
                              <div class="discord-btn ff-bold" @click="openMet()">
                                Join Discord
                                <img src="@/assets/images/user/discord.png" class="icon-sty" alt="">
                              </div>
                              <span class="text" v-html="$t('home.pay_btn_text')"></span>
                            </div>
                          </div>
                          <div class="oth-lin">
                            <div>
                              <div class="fr-ic"
                                v-if="item.expressCalcVo.channelRate == 0 && item.expressCalcVo.channelFixFee == 0">
                                <img src="@/assets/images/user/power.png" class="po-ic" alt="">
                                <span class="fr-te">{{ $t('pay.free_hand_text') }}</span>
                              </div>
                            </div>
                            <div class="default-text"
                              v-if="item.originalRate && item.originalFeeAmount && (item.expressCalcVo.channelRate > 0 || item.expressCalcVo.channelFixFee > 0)">
                              {{ item.originalRate }}%+{{ item.expressCalcVo.currencyCode }} {{ item.originalFeeAmount
                              }}
                            </div>
                          </div>
                        </div>
                        <div class="right" v-if="item.description">
                          <span class="remark" v-html="item.description"></span>
                        </div>
                      </div>
                      <div class="tips-sty"
                        v-if="(channelIdentification == 'paypal' || channelIdentification == 'paypal_kaimai') && (item.payCode == 'paypal' || item.payCode == 'paypal_kaimai')">
                        <div></div>
                        <div class="content-tips">{{ $t('hot.paypal_tips') }}</div>
                      </div>
                    </div>
                    <!-- 是否到达支付限额 -->
                    <div class="quota-sty" v-if="item.dailyLimitFlag">{{ $t('pay.quota_tip_text') }}</div>
                  </div>
                </template>
              </RadioGroup>
            </div>
            <div class="footer-sty" v-if="isBankShow">
              <div></div>
              <div class="sty-bot">
                <div class="pay-wrap">
                  <!-- 去充值 -->
                  <div class="btn" @click="goBank()">{{ $t('pay.go_to_up_text') }}</div>
                  <!-- 客服 -->
                  <div class="chat-with-us" @click="openService">
                    <img src="@/assets/images/user/chat-with-us.svg" alt="Chat with us" />
                    <span>{{ $t('public.payService') }}</span>
                  </div>
                </div>
                <div class="tips-text">
                  {{ $t('public.payServiceText') }}{{ $t('public.payService') }}
                </div>
              </div>
            </div>
            <div class="footer-sty" v-else>
              <div class="prompt" v-if="selectInfo && isWaybill">
                <Checkbox v-model="promptCheckbox"> {{ $t("pay.prompt") }}</Checkbox>
              </div>
              <div v-else></div>
              <div class="sty-bot">
                <div class="pay-wrap" v-if="selectInfo">
                  <div class="pay-amount">
                    <div class="actual-payable">
                      <span class="label pay-label" v-if="titleVis">{{ $t("pay.unpaid_total_price") }}：</span>
                      <span class="label pay-label" v-if="titleVis1">{{ $t("pay.mend_gross_amount") }}：</span>
                      <span class="label pay-label" v-if="titleVis2">{{ $t("pay.actual_recharge_amount") }}：</span>
                      <span class="amount" v-if="exhibition">
                        {{ selectInfo.actAmount.currency }} {{ selectInfo.actAmount.amount }}
                      </span>
                      <Tooltip placement="top" max-width="400" transfer v-else>
                        <span class="amount ff-bold">
                          {{ selectInfo.actAmount.currency }} {{ selectInfo.actAmount.amount }}
                          <Icon type="ios-help-circle-outline" size="22" color="#333333" />
                        </span>
                        <div slot="content">
                          <div v-if="exhibition8" class="fees-text">{{ $t("pay.amountPayable")
                          }}：{{ selectInfo.tradeAmount.currency }} {{
                              selectInfo.tradeAmount.amount }}</div>
                          <div v-if="exhibition10" class="fees-text">{{ $t("pay.handle_mend_fee")
                          }}：{{ selectInfo.tradeAmount.currency }} {{
                              selectInfo.tradeAmount.amount }}</div>
                          <div v-if="exhibition9" class="fees-text">{{ $t("pay.handlingCharge")
                          }}：{{ selectInfo.costFee.currency }} {{
                              selectInfo.costFee.amount }}</div>
                          <div v-if="exhibition1" class="fee-text">{{ $t("home.tax_text1") }}：{{ feeCost.clearanceFee }}
                          </div>
                          <div v-if="exhibition2" class="fee-text">{{ $t("home.tax_text2") }}：{{ cheapLogistics }}</div>
                          <div v-if="exhibition3" class="fee-text">{{ $t("home.tax_text3") }}：{{ feeCost.insuranceFee }}
                          </div>
                          <div v-if="exhibition4" class="fee-text">{{ $t("home.tax_text4") }}：{{ feeCost.logisticsFee }}
                          </div>
                          <div v-if="exhibition5" class="fee-text">{{ $t("home.tax_text5") }}：{{ feeCost.operateFee }}
                          </div>
                          <div v-if="exhibition6" class="fee-text">{{ $t("home.tax_text6") }}：{{ feeCost.serviceFee }}
                          </div>
                          <div v-if="exhibition7" class="fee-text">{{ $t("home.tax_text7") }}：{{ feeCost.storageFee }}
                          </div>
                        </div>
                      </Tooltip>
                    </div>
                  </div>
                  <!-- 优惠券 -->
                  <!-- <coupon v-if="payList.length > 0 && isWaybill" ref="coupon" @loadingFc="loadingFc"
          @amountAssignment="amountAssignment" :userLanguage="userLanguage" :userInfo="userInfo"
          :selectInfo="selectInfo" :channelCode="channelIdentification" :currentInfo="currentInfo"
          :orderNo="$route.query.id" /> -->
                  <div class="btn" @click="onOrderPayment">{{ $t("pay.payment") }}</div>
                  <!-- 客服 -->
                  <div class="chat-with-us" @click="openService">
                    <img src="@/assets/images/user/chat-with-us.svg" alt="Chat with us" />
                    <span>{{ $t('public.payService') }}</span>
                  </div>
                </div>
                <div class="tips-text">
                  {{ $t('public.payServiceText') }}{{ $t('public.payService') }}
                </div>
              </div>
              <div v-if="loadingAll" class="loadingAll">
                <t-loading></t-loading>
              </div>
            </div>
          </div>
        </div>

        <!--支付成功弹窗-->
        <Modal class="pop" class-name="vertical-center-modal" v-model="showPop" :cancel-text="$t('pay.repay')"
          :ok-text="$t('pay.paymentSuccess')" @on-ok="confirmPay" :title="$t('pay.paymentProblem')">
          <div class="pop-content">
            <Alert type="warning" show-icon>{{ $t("pay.warmReminder") }}</Alert>
            <div class="text">
              {{ $t("pay.paymentCompleted") }}
            </div>
            <i18n path="pay.problemWithPayment" class="text">
              <span slot="feedback">{{ $t("pay.clickFeedback") }}</span>
            </i18n>
          </div>
        </Modal>

        <!--充值-->
        <Modal class="pop" class-name="vertical-center-modal" width="480" v-model="rechargePop"
          :title="$t('user.recharge')">
          <div class="pop-label">
            {{ $t("user.recharge") }}({{ userCurrency.code }}) <span>*</span>
          </div>
          <Input v-model="amount" :placeholder="$t('user.enterRechargeAmount')" />
          <div slot="footer" class="recharge-fot">
            <div class="">
              <!-- <span class="col-text" @click="enterShow()">{{ $t('pay.enter_bank_btn') }} </span>
              <span class="text">{{ $t('pay.bank_sub_pay_tit') }}</span> -->
            </div>
            <div class="right">
              <Button @click="rechargePop = false">{{ $t("user.cancel") }}</Button>
              <Button @click="onRecharge" :loading="rechargeLoading" :disabled="rechargeLoading" type="primary">{{
                $t("user.recharge") }}</Button>
            </div>
          </div>
        </Modal>
      </div>
    </div>
    <risk-control-pop ref="riskRef" :riskControlPop="riskControlPop" :paypalPop="paypalPop" @openService="openService"
      :payType="payType" @paypalMet="paypalMet"></risk-control-pop>
    <!-- 空中云汇支付 -->
    <cloud-hub ref="cloudHubRef" @airwallexSuccess="airwallexSuccess"></cloud-hub>
    <!-- 组合支付弹框 -->
    <combined-payment ref="combinedRef" :payList="otherAllList" :currentSelectInfo="currentSelectInfo"
      :currentInfo="currentInfo" :goldCoinAmount="goldCoinAmount" :balanceAmount="balanceAmount"
      :goldCoinCNYAmount="goldCoinCNYAmount" :currentCurrency="currentCurrency" :orderNo="$route.query.id"
      @currentChannelIdentification="currentChannelIdentification"></combined-payment>

    <!-- 异常提醒 -->
    <exception-pop ref="exceptionRef" :klarnaCountry="klarnaCountry" :klarnaCode="klarnaCode"
      @yesMet="yesMet"></exception-pop>
		<!-- 飞来汇支付 - 谷歌、苹果jsk -->
		<pay-fly ref="flyPayPopup" style="z-index: 999;"></pay-fly>
  </div>
</template>

<script>
import { orderChannelList, orderPayment, getAllCurrency, orderMergePay } from "@/api/order";
import { mapState } from "vuex";
import { payByBalance, recharge, userInfo } from "@/api/user";
import { debounce } from "@/common/common";
import coupon from "./coupon.vue";
import TLoading from "@/components/t-loading";
import RiskControlPop from "@/views/main/pay/compontents/risk-control-pop.vue";
import CloudHub from './cloudHub.vue';
import CombinedPayment from './compontents/combined-payment.vue';
import { pointUser } from "@/common/point/api-hook";//打点日志
import ExceptionPop from './compontents/exception-pop.vue';
import payFly from './compontents/pay-fly';

export default {
  name: "index",
  components: { coupon, TLoading, RiskControlPop, CloudHub, CombinedPayment, ExceptionPop,payFly },
  data() {
    return {
      priorityList: [],
      otherAllList: [],
      currentSelectInfo: {},
      showPayType: true,
      isShowFlag: false,
      balanceAmount: 0,
      goldCoinAmount: 0,
      goldCoinCNYAmount: 0,
      cheapLogistics: this.$route.query.cheapLogistics,
      titleVis: false,
      titleVis1: false,
      titleVis2: false,
      exhibition: false,
      exhibition1: false,
      exhibition2: false,
      exhibition3: false,
      exhibition4: false,
      exhibition5: false,
      exhibition6: false,
      exhibition7: false,
      exhibition8: false,
      exhibition9: false,
      exhibition10: false,
      promptCheckbox: true,
      rechargeLoading: false,
      rechargePop: false,
      amount: "",
      payPop: false, // 支付密码弹窗
      showPop: false,
      loading: false, // 提交
      currentCurrency: "", // 当前选择币种
      currentInfo: {
        code: "",
        flagImg: "",
        text: "",
      },
      loadingAll: false,
      comingPay: [
        {
          id: "1749330330890899458",
          name: "Stripe",
          payCode: "stripe",
          icon: "https://libcdn1.hahbuy.com/prod/payment/logo/stripe_1705907766060.png",
          subIcon:
            "https://libcdn1.hahbuy.com/prod/payment/bigLogo/stripe2_1705907775025.png",
          darkIcon:
            "https://libcdn1.hahbuy.com/prod/payment/logo/stripe_1705907766060.png",
          darkSubIcon:
            "https://libcdn1.hahbuy.com/prod/payment/logo/stripe_1705907766060.png",
          // description:
          //   "结算币种为美元，非美元用户支付时可能会由银行进行自动换汇；支持Visa/MasterCard/American Express/Discover/Dinerclub。",
          // balance: 0,
          // title: "",
          // minAmount: 10,
          // maxAmount: 0,
          // paymentVo: {
          //   costFee: {
          //     currency: "CNY",
          //     symbol: "¥",
          //     amount: 0.98,
          //     rate: 1,
          //   },
          //   tradeAmount: {
          //     currency: "CNY",
          //     symbol: "¥",
          //     amount: 13.5,
          //     rate: 0,
          //   },
          //   actAmount: {
          //     currency: "CNY",
          //     symbol: "¥",
          //     amount: 14.48,
          //     rate: 1,
          //   },
          //   discountAmount: null,
          // },
          // forbid: null,
          // forbidReason: null,
          // supportCurrencies: null,
        },
        {
          id: "1101",
          name: "Google Pay",
          payCode: "Google Pay",
          icon: "https://libcdn1.hahbuy.com/dev/pay/img_v3_02da_271f02d6-fdae-4c8d-93ca-2648323664bg_1722415373798.png",
        },
        {
          id: "1102",
          name: "Apple Pay",
          payCode: "Apple Pay",
          icon: "https://libcdn1.hahbuy.com/dev/pay/img_v3_02da_b1c8b1b1-42bf-433f-9966-a43b38bdb27g_1722415395449.png",
        },
        {
          id: "1001",
          name: "支付宝",
          payCode: "Alipay",
          icon: "https://libcdn1.hahbuy.com/dev/pay/%E6%94%AF%E4%BB%98%E5%AE%9D1_1722059028536.png",
        },
        {
          id: "1002",
          name: "Ideal",
          payCode: "Ideal",
          icon: "https://libcdn1.hahbuy.com/dev/pay/ideal1_1722058971302.png",
        },
        {
          id: "1003",
          name: "Sofort",
          payCode: "Sofort",
          icon: "https://libcdn1.hahbuy.com/dev/pay/%E6%94%AF%E4%BB%98%E5%AE%9D1-1_1722059042685.png",
        },
        {
          id: "1004",
          name: "Sepa",
          payCode: "Sepa",
          icon: "https://libcdn1.hahbuy.com/dev/pay/sepa1_1722059014920.png",
        },
        {
          id: "1005",
          name: "Blik",
          payCode: "Blik",
          icon: "https://libcdn1.hahbuy.com/dev/pay/blik1_1722058951279.png",
        },
        {
          id: "1006",
          name: "Mybank",
          payCode: "Mybank",
          icon: "https://libcdn1.hahbuy.com/dev/pay/mybankselected1_1722058998826.png",
        },
        {
          id: "1007",
          name: "Kakao Pay",
          payCode: "Kakao Pay",
          icon: "https://libcdn1.hahbuy.com/dev/pay/KakaoPay1_1722058983466.png",
        },
      ],
      payList: [],
      info: "", // 支付信息
      channelIdentification: "",
      selectInfo: "", // 选择的国家信息
      countryList: [], // 国家列表
      orderNo: "",
      couponCustomerId: "",
      time: null,
      isWaybill: false,
      type: "",
      feeCost: {},
      currencyList: [],
      paypalPop: false,
      riskControlPop: false,
      payType: '',
      isBankShow: false,
      klarnaCountry: '',
      klarnaCode: ''
    };
  },
  computed: {
    ...mapState({
      userLanguage: (state) => state.user.userLanguage,
      userInfo: (state) => state.user.userInfo,
      config: (state) => state.config.config,
      userCurrency: (state) => state.user.userCurrency,
      // 货币的接口不用这里的数据，改用新接口：/base/getAllCurrency
      //currencyList: (state) => {
      //  let list = [];
      //  if (state.config.config) {
      //    list = state.config.config.currencyList;
      //  }
      //  return list;
      //},
    }),
    comJump() {
      return process.env.VUE_APP_API == 'https://api.100buy.com' ? `/notice/1867844796468531202` : `/notice/1867780182687059969`;
    }
  },
  watch: {
    config() {
      this.currentCurrency = this.userCurrency.code;
      this.selectCurrency(this.currentCurrency);
    },
    userInfo() {
      if (localStorage.getItem(`${this.userInfo.id}-showPayType`)) {
        const storedValue = localStorage.getItem(`${this.userInfo.id}-showPayType`);
        this.showPayType = JSON.parse(storedValue);
      }
    }
  },
  created() {
    this.getCodeList();//获取币种
    this.orderNo = this.$route.query.id;
    this.type = this.$route.query.type;
    this.isWaybill = this.isShow();
    if (this.config) {
      this.currentCurrency = this.userCurrency.code;
      this.selectCurrency(this.currentCurrency);
    }
    this.$store.dispatch("getUserInfo");
    this.handleDataId();
  },
  methods: {
    enterShow() {
      this.channelIdentification = 'bankCode';
      this.isBankShow = true;
      this.rechargePop = false;
    },
    selectBank() {
      this.channelIdentification = 'bankCode';
      this.isBankShow = true;
    },
    quotaStyle(item) {
      return item.dailyLimitFlag || (item.forbid && item.forbid == 'disable');
    },
    paypalMet() {
      this.$refs.riskRef.riskPop = false;
    },
    openService() {
      this.$refs.riskRef.riskPop = false;
      if (window.ssq) {
        ssq.push('chatOpen')
      }
    },
    handleDataId() {
      switch (this.$route.query.markText) {
        // 充值
        case 'recharge':
          this.titleVis2 = true;//实际充值金额
          this.exhibition8 = true;//应付金额
          this.exhibition9 = true;//手续费
          break;
        // 订单支付
        case 'indent':
          this.titleVis = true;//待支付总价
          this.exhibition8 = true;//应付金额
          this.exhibition9 = true;//手续费
          break;
        // 运单支付
        case 'waybill':
          this.titleVis = true;//待支付总价
          this.exhibition8 = true;//应付金额
          this.exhibition9 = true;//手续费
          this.exhibition2 = true;//折扣券、满减券优惠金额
          break;
        // 运单补款支付
        case 'freightSupplement':
          this.titleVis = true;//待支付总价
          this.exhibition8 = true;//应付金额
          this.exhibition9 = true;//手续费
          this.exhibition2 = true;//折扣券、满减券优惠金额
          break;
        case 'entrepot':
          this.exhibition2 = true;//折扣券、满减券优惠金额
          this.exhibition3 = true;//保险费用
          break;
        // 补款支付
        case 'mend':
          this.titleVis1 = true;//补款总金额
          this.exhibition10 = true;//应付补款金额
          this.exhibition9 = true;//手续费
          // this.exhibition = true;//问号
          break;
        // 包裹待支付
        case 'parcelAffirm':
          this.titleVis = true;//待支付总价
          this.exhibition8 = true;//应付金额
          this.exhibition9 = true;//手续费
          this.exhibition2 = true;//折扣券、满减券优惠金额
          break;
        // 自定义订单
        case 'diyRelevant':
          this.exhibition8 = true;//应付金额
          break;
        default:
          break;
      }
    },
    getCodeList() {
      getAllCurrency().then((res) => {
        this.currencyList = res.result;
      })
    },
    onRecharge() {
      // 充值
      this.rechargeLoading = true;
      recharge(this.amount)
        .then((res) => {
          let toUrl = this.$router.resolve({
            path: "/pay",
            query: {
              id: res.result,
            },
          });
          window.open(toUrl.href);
          this.amount = "";
          this.rechargeLoading = false;
        })
        .catch(() => {
          this.rechargeLoading = false;
        });
    },
    loadingFc(val) {
      this.loadingAll = val;
      // 解决code500拦截无法取消loadingAll问题
      if (!this.time) {
        this.time = setTimeout(() => {
          this.time = null;
          this.loadingAll = false;
        }, 5000);
      }
    },
    selectCurrency(value) {
      this.channelIdentification = '';
      this.selectInfo = "";
      this.feeCost = {};
      // 选择币种
      let info = this.currentCurrency;
      // let info = this.currencyList.find((item) => {
      //   return item.code == value;
      // });
      this.currentInfo = { ...this.currentInfo, ...info };
      this.currentInfo.code = info;
      this.getOrderChannelList();
      if (this.$refs.coupon) this.$refs.coupon.onCancell();
    },
    confirmPay() {
      // 确认支付
      this.$router.push("/user/center");
    },
    onSelect(info) {
      this.isBankShow = false;//未选银行汇款的话就设置为false

      if (!info.dailyLimitFlag && (!info.forbid && info.forbid != 'disable')) {
        this.channelIdentification = '';
        // this.isShowFlag = info.mergePayFlag;
        this.selectInfo = JSON.parse(JSON.stringify(info.paymentVo));
        this.channelIdentification = info.payCode;
        if (this.$refs.coupon) this.$refs.coupon.onCancell();
      }

      // 如果余额不足，需要使用组合支付时，直接打开弹框，帮用户省去操作
      this.priorityList.forEach(item => {
        if (item.payCode == info.payCode) {
          if (item.mergePayFlag) {
            // this.isShowFlag = item.mergePayFlag;
            // 当前选择的组合支付
            this.currentSelectInfo = item;
            setTimeout(() => {
              this.$refs.combinedRef.open();
            }, 300);
          }
        }
      })
    },
    onOrderPayment: debounce(function () {
      this.payType = this.channelIdentification;

      // if (this.balanceAmount < this.selectInfo.actAmount.amount) {
      //   this.$Message.warning(this.$t('combination.deficiency_text'));
      //   return;
      // }
      // 支付埋点
      if (this.$analytics) {
        this.$analytics.logEvent('payOrder');
      }

      // 确认支付
      if (this.isWaybill && !this.promptCheckbox) {
        this.$Message.error(this.$t("pay.check"));
        return;
      }

      if (this.$route.query.markText == 'indent') {
        pointUser('actions', '2010');
      } else if (this.$route.query.markText == 'waybill') {
        pointUser('actions', '2013');
      } else if (this.$route.query.markText == 'freightSupplement') {
        pointUser('actions', '2016');
      } else if (this.$route.query.markText == 'parcelAffirm') {
        pointUser('actions', '2013');
      }

      if (this.channelIdentification == "balance") {
        this.onPayByBalance();
        return false;
      }
      // 判断支付渠道为paypal时显示弹框，反之正常支付
      // if (this.channelIdentification == "paypal") {
      //   this.$refs.riskRef.riskPop = true;
      //   this.paypalPop = true;
      // } else {
			const isCase = this.channelIdentification.toLowerCase();
			let data = {
				payAmount: this.selectInfo.actAmount.amount,
				channelCode: this.channelIdentification,
				orderNo: this.$route.query.id,
				currencyCode: this.currentCurrency,
				couponId: this.couponId,
				couponCustomerId: this.couponCustomerId,
			}
			//飞来汇 谷歌支付
			if(isCase.indexOf('flyway_google') != -1){
				data.additionalParam = {
					paymentMethod:'GooglePay'
				}
			}
			//飞来汇 苹果支付
			if(isCase.indexOf('flyway_apple') != -1){
				data.additionalParam = {
					paymentMethod:'ApplePay'
				}
			}
      this.loading = true;
      orderPayment(data).then((res) => {
        // 空中云汇
        // 不区分大小写
        
        if (isCase.indexOf('airwallex_google') != -1) {
          this.airwallexPay(res.result, 'google')
          return;
        }
        if (isCase.indexOf('airwallex_apple') != -1) {
          this.airwallexPay(res.result, 'apple')
          return;
        }
        if (isCase.indexOf('airwallex_klarna') != -1) {
          window.location.href = res.result.jsonInfo.url;
          return;
        }
				//飞来汇 苹果支付
				if(isCase.indexOf('flyway_apple') != -1){
					this.$refs.flyPayPopup.open(res.result.jsonInfo,'apple');
					return;
				}
				//飞来汇 谷歌支付
				if(isCase.indexOf('flyway_google') != -1){
					this.$refs.flyPayPopup.open(res.result.jsonInfo,'google');
					return;
				}
        // 正常支付完成后的流程
        this.showPop = true;
        if (this.channelIdentification == 'goldcoin' || this.channelIdentification == 'balance') {
          this.$router.push(`/result?orderNo=${this.$route.query.id}`);
        } else {
          window.open(res.result);
        }
        this.loading = false;
      }).catch((err) => {
        this.loading = false;
        if (err.code == 5000) {
          this.$refs.riskRef.riskPop = true;
          this.riskControlPop = true;
        } else if (err.code == 8000) {
          this.$refs.riskRef.riskPop = true;
          this.paypalPop = true;
        } else if (err.code == 8001) {
          let k = err.message.replace(/\s/g, "");//去除空格
          let k1 = k.split(':')//切割
          this.klarnaCountry = k1[0].split('[')[1]//再一次切割，获取正确国家
          this.klarnaCode = k1[1].split(']')[0]//再一次切割，获取正确币种
          this.$refs.exceptionRef.open();
        }
      });
      // }
    }),
    //空中云汇
    airwallexPay(res, payType) {
      let airwallexData = {
        countryCode: res.jsonInfo.country_code,
        env: process.env.VUE_APP_API == 'https://api.100buy.com' ? 'prod' : 'demo',
        locale: this.userLanguage.code,
        intentId: res.jsonInfo.intent_id,
        clientSecret: res.jsonInfo.client_secret,
        currency: res.jsonInfo.currency,
        payType
      }
      localStorage.setItem('airwallexObj', JSON.stringify(airwallexData));
      this.$refs.cloudHubRef.open(payType);
    },
    //空中云汇-支付成功
    airwallexSuccess(e) {
      console.log("空中云汇支付成功", e);
      this.$router.push({
        path: "/result?orderNo=" + this.$route.query.id,
      });
      this.loading = false;
    },
    cancelPay() {
      // 取消支付
      this.payPop = false;
    },
    // 是否显示
    isShow() {
      return (
        this.$route.query.id.charAt(0) == "Y" &&
        this.$route.query.isWaybill != "confirmWaybill"
      );
    },
    onPayByBalance() {
      // 余额支付
      this.loading = true;
      payByBalance(
        this.$route.query.id,
        '',
        this.couponCustomerId
      )
        .then((res) => {
          this.$router.push({
            path: "/result?orderNo=" + this.$route.query.id,
          });
          this.payPop = false;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          if (err.code == 5000) {
            this.$refs.riskRef.riskPop = true;
            this.riskControlPop = true;
          } else if (err.code == 8000) {
            this.$refs.riskRef.riskPop = true;
            this.paypalPop = true;
          }
        });
    },
    getOrderChannelList() {
      // 获取支付
      orderChannelList({
        currencyCode: this.currentCurrency,
        orderNo: this.$route.query.id,
      }).then((res) => {
        this.info = res.result;

        // 默认支付渠道
        this.priorityList = res.result.paymentList.filter(item => {
          return item.payCode == 'balance' || item.payCode == 'goldcoin';
        });
        // 提供的支付渠道
        this.payList = res.result.paymentList.filter(item => {
          return item.payCode != 'balance' && item.payCode != 'goldcoin';
        });

        //  然后根据 dailyLimitFlag 对过滤后的数组进行排序
        this.payList.sort((a, b) => (a.dailyLimitFlag ? 1 : -1) - (b.dailyLimitFlag ? 1 : -1));

        if (this.priorityList.length > 0) {
          this.priorityList.forEach(item => {
            if (item.payCode == 'balance') {
              // this.selectInfo = item.paymentVo;
              // this.feeCost = item.expressCalcVo;
              // this.channelIdentification = item.payCode;
              if (item.mergePayFlag) {
                // this.isShowFlag = item.mergePayFlag;
                // // 当前选择的组合支付
                // this.currentSelectInfo = item;
                // // 返回除了当前选择的组合支付的所有支付通道
                // this.otherAllList = res.result.paymentList.filter(item => {
                //   return item.payCode != item.payCode;
                // });
                // setTimeout(() => {
                //   this.$refs.combinedRef.open();
                // }, 300);
              }
            }
          })
        } else {
          // this.channelIdentification = this.payList[0].payCode;
        }

        // 如果是充值的话默认选中第一个三方支付
        if (this.type == "recharge") {
          this.selectInfo = this.payList[0].paymentVo;
          // this.payList = this.payList.filter(item => item.payCode !== 'flyway');//充值禁用飞来汇
        }

        // 检查用户系统是否是苹果，如果不是不显示飞来汇的苹果支付 toLowerCase不区分大小写
        const userAgent = (navigator.userAgent || window.opera).toLowerCase();
        const isIos = userAgent.includes('iphone') || userAgent.includes('ipad') || userAgent.includes('ipod') || userAgent.includes('macintosh');
        const isSafari = isIos && userAgent.includes('safari') && !userAgent.includes('chrome');
        if (isIos && isSafari) {
          // console.log("苹果用户");
        } else {
          this.payList = this.payList.filter(item => {
            const lowerCasePayCode = item.payCode.toLowerCase();
            return lowerCasePayCode.indexOf('apple') === -1;
          })
        }


        // if (this.type == "recharge") {
        //   this.payList = res.result.paymentList.filter(item => item.payCode !== 'flyway');
        // } else {
        //   this.payList = res.result.paymentList;
        // }

        this.balanceAmount = res.result.balance;//余额
        this.goldCoinAmount = res.result.goldCoin;//金币
        this.goldCoinCNYAmount = res.result.goldCoinCNY;//金币折合CNY
      }).catch((err) => {
        if (err.code == 5000) {
          this.$refs.riskRef.riskPop = true;
          this.riskControlPop = true;
        } else if (err.code == 8000) {
          this.$refs.riskRef.riskPop = true;
          this.paypalPop = true;
        }
      });
    },
    amountAssignment(data) {
      if (data.amount) this.selectInfo.actAmount.amount = data.amount;
      this.couponCustomerId = data.couponCustomerId;
      this.loadingFc(false);
    },
    combinationMet() {
      this.$refs.combinedRef.open();
    },
    currentChannelIdentification(val) {
      this.payType = this.channelIdentification;
      // 支付埋点
      if (this.$analytics) {
        this.$analytics.logEvent('payOrder');
      }

      // 确认支付
      if (this.isWaybill && !this.promptCheckbox) {
        this.$Message.error(this.$t("pay.check"));
        return;
      }
      // 判断支付渠道为paypal时显示弹框，反之正常支付
      // if (this.channelIdentification == "paypal") {
      //   this.$refs.riskRef.riskPop = true;
      //   this.paypalPop = true;
      // } else {
      this.loading = true;
			const isCase = val.channelCodeSlave.toLowerCase();
			let data = {
				channelCodeMaster: val.channelCodeMaster,
				channelCodeSlave: val.channelCodeSlave,
				orderNo: this.$route.query.id,
				currencyCode: val.currencyCode,
				payAmount: val.payAmount,
			}
			//飞来汇 苹果支付
			if(isCase.indexOf('flyway_apple') != -1){
				data.additionalParam = {
					paymentMethod:'ApplePay'
				}
			}
			//飞来汇 谷歌支付
			if(isCase.indexOf('flyway_google') != -1){
				data.additionalParam = {
					paymentMethod:'GooglePay'
				}
			}
      orderMergePay(data).then((res) => {
        // 空中云汇
        // 不区分大小写
        if (isCase.indexOf('airwallex_google') != -1) {
          this.airwallexPay(res.result, 'google')
          return;
        }
        if (isCase.indexOf('airwallex_apple') != -1) {
          this.airwallexPay(res.result, 'apple')
          return;
        }
        if (isCase.indexOf('airwallex_klarna') != -1) {
          window.location.href = res.result.jsonInfo.url;
          return;
        }
				//飞来汇 苹果支付
				if(isCase.indexOf('flyway_apple') != -1){
					this.$refs.flyPayPopup.open(res.result.jsonInfo,'apple');
					return;
				}
				//飞来汇 谷歌支付
				if(isCase.indexOf('flyway_google') != -1){
					this.$refs.flyPayPopup.open(res.result.jsonInfo,'google');
					return;
				}
        // 正常支付完成后的流程
        this.showPop = true;
        window.open(res.result);
        this.loading = false;
      }).catch((err) => {
        console.log(err);
      });
    },
    closeMet() {
      this.showPayType = false;
      localStorage.setItem(`${this.userInfo.id}-showPayType`, JSON.stringify(false));
    },
    goBank() {
      this.$router.push('/bankRemittance')
    },
    yesMet() {
      this.currentCurrency = this.klarnaCode;
      this.selectCurrency(this.currentCurrency);

      // const foundItem = this.payList.find(item => item.payCode === this.channelIdentification);
      // console.log("foundItem", foundItem);

      // if (foundItem) {
      //   this.onSelect(foundItem);
      // }
    },
    openMet() {
      // window.open('https://discord.com/channels/1260131355573092412/1283010067649789993', '_blank');
      window.open('https://discord.com/invite/H5fEeBCY3y', '_blank');
    }
  },
};
</script>

<style scoped lang="less">
.vertical-center-modal {

  .recharge-fot {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      width: 260px;
      font-weight: 500;
      font-size: 16px;
      line-height: 19px;
      text-align: left;

      .col-text {
        color: #FF186B;
        cursor: pointer;
      }

      .text {
        color: #767B93;
      }
    }
  }
}

.main {

  .content {
    background: #FFFFFF;
    min-height: 300px;

    .wrapper {
      position: relative;
      margin: 32px 160px 0 160px;

      .page {
        // margin: 40px auto;

        .pay-flow {
          width: 100%;
          height: 100%;
          margin-bottom: 32px;
        }

        .top-title {
          font-weight: 600;
          font-size: 24px;
          color: #333333;
          line-height: 28px;
        }

        .top-text {
          margin-top: 24px;
          font-weight: 400;
          font-size: 22px;
          color: #767B93;
          line-height: 26px;
        }

        .pay-date {
          display: block;
          margin-top: 16px;
          font-weight: 400;
          font-size: 22px;
          color: #767B93;
          line-height: 26px;

          span {
            color: @primary-color;
          }
        }

        .pay-tip {
          padding: 24px;
          background: linear-gradient(78deg, rgba(242, 20, 115, 0.04) 8%, rgba(53, 151, 255, 0.1) 38%, rgba(215, 133, 56, 0.1) 81%, rgba(17, 31, 226, 0.1) 100%);
          border-radius: 8px;
          border: 2px solid transparent;
          border-image: linear-gradient(82deg, rgba(242, 20, 115, 1), rgba(53, 151, 255, 1), rgba(215, 133, 56, 1), rgba(17, 31, 226, 1)) 1 1;
          background-clip: padding-box;
          margin-top: 32px;

          .tip-title {
            width: 100%;
            font-weight: 600;
            font-size: 20px;
            color: #000000;
            line-height: 32px;
            display: inline-flex;
            justify-content: space-between;
            align-items: end;

            .left {
              display: inline-flex;
              align-items: center;

              .praise-icon {
                width: 32px;
                height: 32px;
              }
            }

            .close-icon {
              color: #999999;
              font-size: 32px;
              cursor: pointer;
            }
          }

          .tip-content {
            font-weight: 400;
            font-size: 16px;
            color: #000000;
            line-height: 38px;
            margin-top: 20px;

            .jump-text {
              font-weight: 400;
              font-size: 16px;
              color: #FF186B;
              line-height: 19px;
            }

            // span {
            //   height: 38px;
            //   padding: 0 14px;
            //   background: #0C2B06;
            //   border-radius: 40px;
            //   font-weight: 600;
            //   font-size: 18px;
            //   color: #40FF1B;
            //   line-height: 21px;
            //   margin: 0 12px;
            //   display: inline-flex;
            //   align-items: center;

            //   .reduce-img {
            //     width: 24px;
            //     height: 24px;
            //   }
            // }
          }
        }

        .content {

          .title {
            margin-top: 32px;
            margin-bottom: 24px;
            font-weight: 600;
            font-size: 24px;
            color: #333333;
            line-height: 28px;
          }

          .select-country {
            display: flex;
            align-items: center;

            :deep(.ivu-select) {
              height: 48px;
              border-radius: 4px 4px 4px 4px;
              // border: 1px solid #E9EAF3;

              .ivu-select-selection {
                height: 48px;

                .ivu-select-selected-value {
                  height: 48px;
                  padding: 13px 16px;
                  font-weight: 600;
                  font-size: 16px;
                  color: #333333;
                  line-height: 19px;
                }
              }
            }

            .option-content {
              display: flex;
              align-items: center;

              .logo {
                display: block;
                width: 18px;
                margin-right: 4px;
              }
            }
          }

          .hint {
            margin-left: 32px;
            font-weight: 400;
            font-size: 22px;
            color: #333333;
            line-height: 26px;
          }
        }

        .pay-list {
          margin-top: 8px;

          .radio-group {
            width: 100%;
          }

          .pay-tit {
            font-weight: 600;
            font-size: 24px;
            color: #333333;
            line-height: 28px;
            display: flex;
            align-items: center;
            margin-top: 32px;

            .col-red {
              font-size: 16px;
              color: #FF186B;
              line-height: 21px;
              margin-left: 16px;
            }

            .good-icon {
              width: 18px;
              height: 21px;
            }
          }

          .pay-item {
            background: #ffffff;
            border-radius: 4px;
            border-bottom: 1px solid #ececec;
            padding-top: 40px;
            position: relative;

            .mask-area {
              background: #FFFFFF;
              opacity: 0.6;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              z-index: 2;
              cursor: not-allowed;
            }

            .tag {
              padding: 6px 24px;
              background: #f0f9ff;
              border-radius: 4px 4px 0px 0px;
              color: @primary-color;
              font-size: 14px;
            }

            .pay-content {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-bottom: 54px;

              .left {
                display: flex;
                align-items: center;

                .pay-wrap {
                  display: flex;
                  align-items: center;

                  :deep(.ivu-radio-wrapper) {
                    display: flex;
                    align-items: center;
                    gap: 24px;
                    margin-right: 20px;
                  }

                  .pay-logo {
                    display: block;
                    width: 48px;
                  }
                }

                .credit-card {
                  display: block;
                  margin-left: 30px;
                  height: 30px;
                }

                .hand-fee {
                  font-size: 20px;
                  color: #FF186B;
                  line-height: 23px;
                  margin-left: 30px;
                }

                .tooltip {
                  display: flex;
                  gap: 6px;
                  cursor: pointer;
                  font-size: 20px;
                  color: #1E1714;
                  line-height: 23px;

                  .tooltip-content {
                    display: flex;
                    align-items: center;
                    color: @t-title-color;
                    font-size: 14px;
                    font-weight: 500;

                    .iconfont {
                      margin-left: 4px;
                      color: #767B93;
                      font-size: 16px;
                    }
                  }
                }
              }

              .right {
                display: flex;
                align-items: center;

                .remark {
                  width: 500px;
                  white-space: normal;
                  display: block;
                  text-align: right;
                  font-weight: 400;
                  font-size: 16px;
                  color: #AEB0B9;
                  line-height: 19px;
                }

                .btn {
                  width: 140px;
                  margin-left: 24px;
                }
              }
            }

            .other-payment {
              padding-bottom: 40px;

              .pay-content {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 0;

                .line-sty {
                  .left {
                    display: flex;
                    align-items: center;

                    .pay-wrap {
                      display: flex;
                      align-items: center;

                      :deep(.ivu-radio-wrapper) {
                        display: flex;
                        align-items: center;
                        gap: 24px;
                        margin-right: 20px;
                      }

                      .pay-logo {
                        display: block;
                        width: 48px;
                      }

                      .icon-sty {
                        width: 52px;
                      }
                    }

                    .credit-card {
                      display: block;
                      margin-left: 30px;
                      height: 30px;
                    }

                    .hand-fee {
                      font-size: 20px;
                      color: #FF186B;
                      line-height: 23px;
                      margin-left: 30px;
                    }

                    .join-area {
                      min-width: 407px;
                      padding: 10px 20px;
                      background: linear-gradient(78deg, rgba(242, 20, 115, 0.14) 8%, rgba(53, 151, 255, 0.1) 38%, rgba(215, 133, 56, 0.1) 81%, rgba(17, 31, 226, 0.21) 100%);
                      border-radius: 8px 8px 8px 8px;
                      display: inline-flex;
                      align-items: center;
                      margin-left: 16px;
                      position: relative;
                      z-index: 3;

                      .discord-btn {
                        min-width: 148px;
                        padding: 6px 12px;
                        background: #1E1714;
                        border-radius: 22px 22px 22px 22px;
                        font-weight: 600;
                        font-size: 14px;
                        color: #FFFFFF;
                        line-height: 19px;
                        display: inline-flex;
                        align-items: center;
                        cursor: pointer;

                        .icon-sty {
                          width: 22px;
                          height: 22px;
                          margin-left: 4px;
                        }
                      }

                      .text {
                        font-weight: 400;
                        font-size: 14px;
                        color: #1E1714;
                        line-height: 19px;
                        margin-left: 8px;

                        :deep(span) {
                          font-weight: 600;
                          color: #FF186B;
                          font-style: italic;
                        }
                      }
                    }

                    .tooltip {
                      display: flex;
                      gap: 6px;
                      cursor: pointer;
                      font-size: 20px;
                      color: #1E1714;
                      line-height: 23px;

                      .tooltip-content {
                        display: flex;
                        align-items: center;
                        color: @t-title-color;
                        font-size: 14px;
                        font-weight: 500;

                        .iconfont {
                          margin-left: 4px;
                          color: #767B93;
                          font-size: 20px;
                        }
                      }
                    }
                  }

                  .oth-lin {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .fr-ic {
                      height: 32px;
                      padding: 0 10px 0 3px;
                      background: #FF186B;
                      border-radius: 20px;
                      display: inline-flex;
                      align-items: center;
                      gap: 8px;
                      margin-left: 120px;

                      .po-ic {
                        width: 26px;
                        height: 26px;
                      }

                      .fr-te {
                        font-weight: 600;
                        font-size: 14px;
                        color: #FFFFFF;
                        line-height: 16px;
                      }
                    }

                    .default-text {
                      font-size: 20px;
                      color: #767B93;
                      line-height: 23px;
                      text-decoration: line-through;
                    }
                  }
                }

                .right {
                  display: flex;
                  align-items: center;

                  .remark {
                    width: 500px;
                    white-space: normal;
                    display: block;
                    text-align: right;
                    font-weight: 400;
                    font-size: 16px;
                    color: #AEB0B9;
                    line-height: 19px;
                  }

                  .btn {
                    width: 140px;
                    margin-left: 24px;
                  }
                }
              }

              .tips-sty {
                display: flex;
                justify-content: space-between;

                .content-tips {
                  width: 97%;
                  padding: 19px 33px;
                  background: #F7F9FC;
                  border-radius: 8px 8px 8px 8px;
                  font-weight: 600;
                  font-size: 16px;
                  color: #767B93;
                  line-height: 19px;
                  margin-top: 32px;
                }
              }
            }

            .quota-sty {
              padding: 12px 24px;
              background: #FFEEF4;
              border-radius: 8px;
              font-size: 16px;
              line-height: 18px;
              font-weight: 500;
              color: #FF186B;
            }
          }

          .deficiency-sty {
            padding: 32px;
            background: #FFEEF4;
            border-radius: 8px 8px 8px 8px;
            border-bottom: 1px solid #ececec;
            display: flex;
            align-items: end;
            justify-content: space-between;
            margin-top: 48px;

            .rect-area {
              width: 49%;

              .tag {
                font-weight: 400;
                font-size: 20px;
                color: #FF186B;
                line-height: 23px;
                margin-bottom: 16px;
              }

              .default-tag {
                font-weight: 400;
                font-size: 20px;
                color: #1E1714;
                line-height: 23px;
                margin-bottom: 16px;
              }

              .sum-up {
                display: flex;
                justify-content: end;
                align-items: baseline;
                gap: 8px;
                margin-bottom: 16px;
                cursor: pointer;

                .tag-img {
                  width: 32px;
                  height: 17px;
                }

                .entrance-text {
                  font-weight: 600;
                  font-size: 20px;
                  color: #333333;
                  line-height: 23px;
                }
              }

              .pay-content {
                padding: 27px 32px;
                background: #FFFFFF;
                border-radius: 6px 6px 6px 6px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .left {
                  display: flex;
                  align-items: center;

                  .pay-wrap {
                    display: flex;
                    align-items: center;

                    :deep(.ivu-radio-wrapper) {
                      display: flex;
                      align-items: center;
                      gap: 24px;
                      margin-right: 20px;
                    }

                    .pay-logo {
                      display: block;
                      width: 48px;
                    }
                  }

                  .credit-card {
                    display: block;
                    margin-left: 30px;
                    height: 30px;
                  }

                  .hand-fee {
                    font-size: 20px;
                    color: #FF186B;
                    line-height: 23px;
                    margin-left: 30px;
                  }

                  .coin-sty {
                    .coin-info {
                      font-weight: 600;
                      font-size: 20px;
                      color: #1E1714;
                      line-height: 23px;
                      cursor: pointer;
                    }

                    .conversion-text {
                      font-weight: 600;
                      font-size: 15px;
                      color: #767B93;
                      line-height: 18px;
                      margin-top: 6px;
                    }

                    .iconfont {
                      font-weight: 500;
                      color: #a1a6c2;
                      font-size: 16px;
                      margin-left: 4px;
                    }
                  }

                  .tooltip {
                    display: flex;
                    gap: 6px;
                    cursor: pointer;
                    font-weight: 600;
                    font-size: 20px;
                    color: #1E1714;
                    line-height: 23px;

                    .tooltip-content {
                      display: flex;
                      align-items: center;
                      color: @t-title-color;
                      font-size: 14px;
                      font-weight: 500;

                      .iconfont {
                        margin-left: 4px;
                        color: #767B93;
                        font-size: 16px;
                      }
                    }
                  }
                }

                .right {
                  display: flex;
                  align-items: center;

                  .remark {
                    width: 500px;
                    white-space: normal;
                    display: block;
                    text-align: right;
                    font-weight: 400;
                    font-size: 16px;
                    color: #AEB0B9;
                    line-height: 19px;
                  }

                  .btn {
                    border-radius: 8px 8px 8px 8px;
                    border: 1px solid #FF186B;
                    padding: 8px 34px;
                    font-weight: 600;
                    font-size: 16px;
                    color: #FF186B;
                    line-height: 19px;
                    cursor: pointer;
                  }
                }
              }

              // .other-payment {
              //   padding-bottom: 40px;

              //   .pay-content {
              //     display: flex;
              //     align-items: center;
              //     justify-content: space-between;
              //     padding-bottom: 0;

              //     .left {
              //       display: flex;
              //       align-items: center;

              //       .pay-wrap {
              //         display: flex;
              //         align-items: center;

              //         :deep(.ivu-radio-wrapper) {
              //           display: flex;
              //           align-items: center;
              //           gap: 24px;
              //           margin-right: 20px;
              //         }

              //         .pay-logo {
              //           display: block;
              //           width: 48px;
              //         }
              //       }

              //       .credit-card {
              //         display: block;
              //         margin-left: 30px;
              //         height: 30px;
              //       }

              //       .hand-fee {
              //         font-weight: 600;
              //         font-size: 20px;
              //         color: #FF186B;
              //         line-height: 23px;
              //         margin-left: 30px;
              //       }

              //       .tooltip {
              //         display: flex;
              //         gap: 6px;
              //         cursor: pointer;
              //         font-weight: 600;
              //         font-size: 20px;
              //         color: #1E1714;
              //         line-height: 23px;

              //         .tooltip-content {
              //           display: flex;
              //           align-items: center;
              //           color: @t-title-color;
              //           font-size: 14px;
              //           font-weight: 500;

              //           .iconfont {
              //             margin-left: 4px;
              //             color: #767B93;
              //             font-size: 16px;
              //           }
              //         }
              //       }
              //     }

              //     .right {
              //       display: flex;
              //       align-items: center;

              //       .remark {
              //         width: 500px;
              //         white-space: normal;
              //         display: block;
              //         text-align: right;
              //         font-weight: 400;
              //         font-size: 16px;
              //         color: #AEB0B9;
              //         line-height: 19px;
              //       }

              //       .btn {
              //         width: 140px;
              //         margin-left: 24px;
              //       }
              //     }
              //   }

              //   .tips-sty {
              //     display: flex;
              //     justify-content: space-between;

              //     .content-tips {
              //       width: 97%;
              //       padding: 19px 33px;
              //       background: #F7F9FC;
              //       border-radius: 8px 8px 8px 8px;
              //       font-weight: 600;
              //       font-size: 16px;
              //       color: #767B93;
              //       line-height: 19px;
              //       margin-top: 32px;
              //     }
              //   }
              // }
            }
          }
        }


        .footer-sty {
          box-shadow: 0px -3px 29px 0px rgba(231, 231, 231, 0.29);
          border: 1px solid #EAEAF3;
          background: #ffffff;
          padding: 24px 65px 24px 44px;
          position: sticky;
          bottom: 0;
          z-index: 5;
          display: flex;
          justify-content: space-between;

          .sty-bot {
            // display: flex;
            // flex-direction: column;
            // align-items: center;
            // justify-content: end;

            .tips-text {
              font-weight: 400;
              font-size: 19px;
              color: #767B93;
              line-height: 22px;
              text-align: right;
            }

            .pay-wrap {
              display: flex;
              align-items: center;
              justify-content: end;
              margin: 12px 0;

              .pay-amount {
                margin-right: 24px;

                .actual-payable {
                  text-align: right;
                  margin-top: 4px;
                  display: inline-flex;
                  align-items: center;

                  &:first-child {
                    margin-top: 0;
                  }

                  .label {
                    color: #999999;
                    font-size: 14px;
                  }

                  .pay-label {
                    font-weight: 400;
                    font-size: 18px;
                    color: #767B93;
                    line-height: 21px;
                  }

                  .fee-text {
                    text-align: left;
                    color: #ececec;
                    font-size: 12px;
                    text-decoration: line-through;
                  }

                  .fees-text {
                    text-align: left;
                    color: #ececec;
                    font-size: 12px;
                  }

                  .amount {
                    font-weight: bold;
                    font-size: 36px;
                    color: #FF186B;
                    line-height: 42px;
                    display: inline-flex;
                    align-items: baseline;

                    i {
                      cursor: pointer;
                    }
                  }

                  .text {
                    margin-left: 24px;
                    color: @t-title-color;
                    font-size: 14px;
                  }
                }
              }

              .chat-with-us {
                padding: 13px 26px;
                border-radius: 11px 11px 11px 11px;
                border: 1px solid #FF186B;
                display: inline-flex;
                align-items: end;
                gap: 6px;
                cursor: pointer;
                margin-left: 28px;

                span {
                  font-weight: 600;
                  font-size: 19px;
                  color: #FF186B;
                  line-height: 22px;
                }
              }

              .btn {
                padding: 13px 54px;
                height: 53px;
                background: #FF186B;
                border-radius: 11px 11px 11px 11px;
                border: 1px solid #FFFFFF;
                font-weight: 600;
                font-size: 19px;
                color: #FFFFFF;
                line-height: 22px;
                cursor: pointer;
              }
            }
          }

          .loadingAll {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000000;

            .loading {
              margin-top: 20%;
            }
          }

          .prompt {
            text-align: right;
            color: #e76202;
            margin-bottom: 20rpx;

            .ivu-checkbox-wrapper {
              margin: 0;
            }
          }
        }
      }

      .pop {
        .pop-content {
          .pop-label {
            color: @t-title-color;
            font-size: 14px;
            margin-bottom: 6px;
          }

          .text {
            color: @t-title-color;
            font-size: 14px;
            margin-top: 34px;

            &:last-child {
              margin-top: 6px;
            }

            span {
              color: @primary-color;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
